<template>
  <a-layout>
    <a-layout-header class="header">
      <page-header style="width: 1300px; height: 100%" />
    </a-layout-header>
    <a-layout-content class="globe-container">
      <router-view />
    </a-layout-content>
    <a-layout-footer class="footer">
      <page-footer style="width: 1300px; height: 100%" />
    </a-layout-footer>
  </a-layout>
</template>

<script>
import { i18nRender } from '@/locales'
import ConfigProvider from '@ant-design-vue/pro-layout/es/components/ConfigProvider'
import PageHeader from '@/components/PageHeader/index'
import PageFooter from '@/components/PageFooter/index'

export default {
  name: 'GlobalLayout',
  components: {
    ConfigProvider,
    PageHeader,
    PageFooter
  },
  created () {
  },
  mounted () {
    // 计算高度, 实现自适应
    this.handleCalcHeight()
  },
  methods: {
    i18nRender,
    handleCalcHeight () {
      const main = document.querySelector('.globe-container')
      const height = window.screenY
      main.style.height = height - 100
    }
  }
}
</script>

<style scoped>
.header, footer {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}
.header {
  height: 50px;
}
.footer {
  height: 70px;
}
</style>
